<template>
  <el-form label-position="left" label-width="100px" size="mini">
    <el-row :gutter="2" v-if="formData.client_info">
      <el-col :span="12">
        <el-form-item label="客户名称">
          <el-input
            disabled
            readonly
            :value="formData.client_info.name"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form-item label="身份证号">
          <el-input
            disabled
            readonly
            :value="formData.client_info.IDcard"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别">
          <el-radio-group disabled :value="formData.client_info.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form-item label="生日">
          <el-input
            disabled
            readonly
            :value="formData.client_info.birthday"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="社保所在地">
          <el-input
            disabled
            readonly
            :value="formData.client_info.ss_location"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form-item label="社保是否可转">
          <el-radio-group :value="formData.client_info.ss_moveable" disabled>
            <el-radio :label="1">可以</el-radio>
            <el-radio :label="0">不可以</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left" v-if="certList && certList.length > 0">
      证书&挂靠信息
    </el-divider>
    <el-table
      :data="certList"
      size="mini"
      v-if="certList && certList.length > 0"
    >
      <el-table-column type="index" width="50" />
      <el-table-column label="证书编号" prop="cert_num" />
      <el-table-column label="人员类型" prop="type_name" />
      <el-table-column label="资格证专业" prop="title" />
      <el-table-column label="发证日期" prop="cert_effect" />
      <el-table-column label="到期时间" prop="cert_overdate" />
      <el-table-column label="挂靠企业" prop="company" />
      <el-table-column label="挂靠开始时间" prop="offce_startdate" />
      <el-table-column label="挂靠到期时间" prop="offce_enddate" />
    </el-table>

    <el-divider
      content-position="left"
      v-if="attachmentList && attachmentList.length > 0"
    >
      附件
    </el-divider>
    <el-table
      :data="attachmentList"
      v-if="attachmentList && attachmentList.length > 0"
      size="mini"
    >
      <el-table-column type="index" width="50" />
      <el-table-column label="附件描述" prop="title" />
      <el-table-column label="文件">
        <template slot-scope="{ row }">
          <a-file-downloader :path="row.file_path" />
        </template>
      </el-table-column>
      <el-table-column label="上传时间" prop="create_time"></el-table-column>
    </el-table>

    <el-row v-if="formData.client_info">
      <el-divider content-position="left">其他信息</el-divider>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="10"
            :value="formData.client_info.note"
            disabled
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import AFileDownloader from '@/components/AFileDownloader/index.vue';

export default {
  components: {
    AFileDownloader,
  },
  props: {
    formData: {
      type: Object,
      default: function () {
        return {
          client_info: {},
          datalist_info: {},
        };
      },
    },
  },
  computed: {
    certList: function () {
      return this.formData.datalist_info.filter((o) => o.is_cert);
    },
    attachmentList: function () {
      return this.formData.datalist_info.filter((o) => !o.is_cert);
    },
  },
};
</script>

<style></style>
